<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">

<h:head>
  <title><ui:insert name="title">Default title</ui:insert></title>
</h:head>

<body>
		<h:form id="thisform">

			<h:messages/>

			<h:panelGrid columns="2">
				<h:outputText value="Echo input:" />
				<h:inputText id="textInput" value="#{controller.text}">
					<f:ajax execute="textInput" render="textVal"  event="keyup"/>

					
				</h:inputText>
				
				<h:outputText value="Echo output:" />
				<h:outputText id="textVal" value="#{controller.text}" />
		
			
			</h:panelGrid>
	
			<hr />
			<h:panelGrid columns="2">

				<h:panelGroup />
				<h:panelGroup />
				<h:outputText value="First Operand" />
				<h:inputText id="first" value="#{controller.firstOperand}"
					size="3" />
				<h:outputText value="Second Operand" />
				<h:inputText id="second" value="#{controller.secondOperand}"
					size="3" />
				<h:outputText value="Total" />
				<h:outputText id="sum" value="#{controller.total}" />
				<h:commandButton actionListener="#{controller.calculateTotal}"
					value="Result">
					<f:ajax execute="first second" render="sum"></f:ajax>
				</h:commandButton>
			</h:panelGrid>



		</h:form>

</body>
</html>